<template>
  <div>
    <span style="user-select: none; margin-right: 10px;">{{label}}</span>
    <input type="text" v-model="value" :disabled="disabled" ref="input">
    <span ref="copyBtn" class="copyBtn" :data-clipboard-text="value" @click="copyValue">复制</span>
  </div>
</template>
<script>
export default {
  name: 'copyInput',
  props: {
    label: {
      default: ''
    },
    disabled: {
      default: false
    },
    value: {
      default: ''
    }
  },
  data () {
    return {
      oldDisabled: false,
      clipboardBtn: null,
    }
  },
  methods: {
    copyValue () {
      let clipboard = this.clipboardBtn;
      this.disabled = false;
      clipboard.on("success", () => {
        this.$message({
          message: "复制成功",
          type: "success"
        });
        this.disabled = this.oldDisabled;
      });
      clipboard.on("error", () => {
        this.$message({
          message: "复制失败",
          type: "error"
        });
        this.disabled = this.oldDisabled;
      });
    }
  },
  mounted () {
    this.oldDisabled = this.disabled;
    this.clipboardBtn = new this.clipboard(this.$refs.copyBtn);
  }
}
</script>
<style scoped>
.copyBtn{
  cursor: pointer;
  margin-left: 10px;
  color: rgb(0, 119, 255);
}
</style>
